<%--
  Created by IntelliJ IDEA.
  User: YANG
  Date: 2019/11/12
  Time: 21:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>收藏界面</title>
    <style>
        body{
            background-color: #ECFFF2;
        }
        .maindiv{
            width: 100%;
        }
        .inner{
            width: 660px;
            margin: 0 auto;
        }
        .jobmanage{
            width: 100%;
        }
        .demo{
            position:relative;
            font-size: 18px;
            color: #868686;
            margin-top: 10px;
            width: 100%;
            height: 40px;
            background-color:#eeeeee;

        }
        span{
            display: inline-block;
            width:80px;
            line-height:40px;
            margin-left: 20px;
        }
        .demoin{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            width: 100%;
            height:40px;
            margin:auto;
            vertical-align: middle
        }

        .demoin2{
            font-size: 12px;
            color: #868686;
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            width: 100%;
            height:40px;
            margin:auto;
            vertical-align: middle
        }
        button{
            color: white;
            margin-left: 20px;
            width: 80px;
            background-color: #6699CC;
            border: 0;
        }
    </style>

    <script src="Js/jquery-3.4.1.min.js"></script>
    <script src="Js/jquerysession.js"></script>

</head>
<body>
<script>
    $(document).ready(function () {
        //当页面准备时发送ajax请求，加载相关数据，并将之填充到界面上！
        $.ajax({
            type:"GET",
            url:"GetJobCollectionByUserID.action",
            dataType:"json",
            success:function (obj) {

                //    成功了以后需要做一件事，就是把所有的数据迭代出来，这里就需要用到vue，也可以不用vue
                //    加载指定的界面到指定的位置，通过for循环
                for (var j=obj.job.length-1;j>=0;j--){

                    $("#jobmanage")
                        .prepend(
                            '<div class="demo"><div class="demoin2"><span>'+obj.job[j].jobName+'</span>' +
                            '<span>'+obj.job[j].jobNum+'</span>'+
                            '<span>'+obj.job[j].jobSalary+'</span>'+
                            '<span>'+obj.job[j].publishTime+'</span>'+
                            '<button type="button" class="change">查看职位</button>'+
                            '<button type="button" class="delete">取消收藏</button></div></div>'
                        )
                    $.session.set("jobID"+j,obj.job[j].jobID);
                }


                //   把拿到的jobID存储起来


            },

            error:function () {
                alert("失败")
            }

        })
    })

    $("#jobmanage").on('click','.change',function(){
        //点击事件
        var index="jobID"+$(".change").index(this);

        var jobID=$.session.get(index);
        //    当前被包含的是jobmanage.js需要切换到jobrelese,js界面，不是跳一跳
        //切换过去了，但是呢怎么告诉这个 jsp JobID是多少呢
        //在这里存储currentID，就是告诉当前点击的招聘信息的jobID
        window.location.href="jobdetail.jsp?JobID="+jobID;

    })

    //申请职位暂时没写，当用户点击这一条收藏信息得时候跳转到招聘信息界面，然后可以申请，也可以直接申请
    $("#jobmanage").on('click','.delete',function(){
        //点击事件，取消收藏
        var index="jobID"+$(".delete").index(this);
        //这里必须是.delete，否则找不到是第几个！
        var jobID=$.session.get(index);
        $.ajax({
                type: "GET",
                url: "DeleteCollectionByJobID.action?JobID="+jobID,
                dataType: "json",
                success: function (obj) {
                    if (obj.job.delete==1) {
                        alert("取消成功！")
                        window.location.href="user.jsp"
                    //    刷新
                    }
                },
                error: function () {

                }

            })

    })
</script>
<div class="maindiv">
    <div class="inner">
    <div class="demo">
        <div class="demoin">
            <span>职位名称</span><span>招聘数量</span><span>薪资待遇</span><span>发布时间</span>
            <span>立即申请</span><span>取消收藏</span>
        </div>
    </div>

    <div id="jobmanage" class="jobmanage">
        <%--    这里用来填充所有的招聘，然后高度自动增加，只需要通过jquery将相关的代码放入即可--%>
    </div>
        </div>
</div>
</body>
</html>